<template>
	<view class="order-item" v-if='pageType == 2'>
		<view class="order-item-top line-v-center">
			<view class="order-no supply_order_no">包裹{{item.supply_order_no}}</view>
			<view class="status daipeisong" v-if='item.status == 10'>待配送</view>
			<view class="status peisongzhong" v-if='item.status == 20'>配送中</view>
			<view class="status yiwancheng" v-if='item.status == 30'>已完成</view>
		</view>
		<view class="order-goods-wrap line-v-center" v-if='item.orderSupplyGoods.length > 1'>
			<scroll-view class="order-goods-con" scroll-x="true">
				<view class="order-goods">
					<view class="order-goods-item" v-for='(goodsItem,index) in item.orderSupplyGoods'>
						<base-img :src='goodsItem.orderGoods.goods_image'></base-img>
					</view>
				</view>
			</scroll-view>
			<view class="order-goods-right line-v-center">
				<view class="line"></view>
				<view class="order-goods-right-total">
					<view class="order-goods-num-total line-center">共{{item.pick_nums}}件<uni-icons type='right' color='#999'></uni-icons></view>
				</view>
			</view>
		</view>
		<view v-else class="order-goods-wrap2">
			<view class="order-goods-item2" v-for='(goodsItem,index) in item.orderSupplyGoods'>
				<div class="order-goods-img">
					<base-img :src="goodsItem.orderGoods.goods_image"></base-img>
				</div>
				<view class="order-goods-info">
					<view class="order-goods-name">{{goodsItem.orderGoods.goods_name}}</view>
					<view class="attr ellipsis">规格：{{goodsItem.orderGoods.good_sku_name}}</view>
				</view>
				<view class="order-goods-price">
					<view class="price">￥{{goodsItem.orderGoods.goods_price}}<text class="unit" v-if='goodsItem.orderGoods.goods_unit'>/{{goodsItem.orderGoods.goods_unit}}</text></view>
					<view class="num">x{{goodsItem.orderGoods.total_num}}</view>
				</view>
			</view>
		</view>
		<view class="total-wrap">
			<view class="num">共{{item.total_num}}件</view>
			<view class="price">商品金额：￥{{item.total_price}}</view>
		</view>
		<!-- <view class="order-time">下单时间：{{item.create_time}}</view> -->
		<view class="btn-slot">
			<slot></slot>
		</view>
	</view>
	<view class="order-item" v-else>
		<view class="order-item-top line-v-center">
			<view class="order-no">订单编号：{{item.order_no || item.orderM.order_no}}</view>
			<template v-if='pageType == 0'>
				<view class="status daishenhe" v-if='item.order_status == -1'>已取消</view>
				<view class="status daishenhe" v-if='item.order_status == 0'>待审核</view>
				<view class="status daipeisong" v-if='item.order_status == 1'>待配送</view>
				<view class="status peisongzhong" v-if='item.order_status == 2'>审核不通过</view>
				<view class="status peisongzhong" v-if='item.order_status == 3'>配送中</view>
				<view class="status yiwancheng" v-if='item.order_status == 4'>已完成</view>
			</template>
		</view>
		<view class="order-goods-wrap line-v-center">
			<scroll-view class="order-goods-con" scroll-x="true">
				<view class="order-goods" v-if='pageType == 0'>
					<view class="order-goods-item" v-for='(goodsItem,index) in item.orderGoods'>
						<base-img :src='goodsItem.goods_image'></base-img>
					</view>
				</view>
				<view class="order-goods" v-else>
					<view class="order-goods-item" v-for='(goodsItem,index) in item.orderM.orderGoods'>
						<base-img :src='goodsItem.goods_image'></base-img>
					</view>
				</view>
			</scroll-view>
			<view class="order-goods-right line-v-center">
				<view class="line"></view>
				<view class="order-goods-right-total">
					<view class="order-goods-price-total">￥{{item.total_price || item.expend_money}}</view>
					<view class="order-goods-num-total">共{{item.order_total_num || item.orderM.order_total_num}}件</view>
				</view>
			</view>
		</view>
		<view class="order-time">下单时间：{{item.create_time}}</view>
		<view class="btn-slot">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name:"order-item",
		props:{
			pageType:{
				type:Number,
				default:0,//0 --- 我的订单  1 --- 账单详情   2 -- 订单详情
			},
			item:Object
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	$supplier-color:#44C082;
	.order-item{
		padding:24rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top:28rpx;
		.supply_order_no{
			font-weight: bold;
		}
		.order-item-top{
			justify-content: space-between;
			.status{
				font-size: 24rpx;
			}
			.daishenhe{
				color:$supplier-color;
			}
			.daipeisong{
				color:#4FACF8;
			}
			.yiwancheng{
				color:#C0C4CC;
			}
			.peisongzhong{
				color:#F1660A
			}
		}
		.order-goods-wrap{
			justify-content: space-between;
			margin-top:24rpx;
			.order-goods-con{
				width: 514rpx;
				height: 140rpx;
				white-space: nowrap;
				.order-goods{
					display: inline-flex;
					.order-goods-item{
						width: 140rpx;
						height: 140rpx;
						margin-right: 10rpx;
						border-radius: 12rpx;
						overflow: hidden;
					}
				}
			}
			
			.order-goods-right{
				width: 142rpx;
				font-size: 24rpx;
				font-family: DIN-BOLD;
				flex-shrink: 0;
				.line{
					width: 12rpx;
					height: 140rpx;
					background: linear-gradient( 90deg, rgba(255,255,255,0) 0%, #DEDBDB 100%);
				}
				.order-goods-right-total{
					width: 120rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					justify-content: center;
				}
			}
		}
		.order-time{
			color:#999999;
			padding-top:10rpx;
		}
	}
	.order-goods-wrap2{
		margin-top:24rpx;
	}
	.order-goods-item2{
		display: flex;
		margin-bottom: 48rpx;
		&:last-of-type{
			margin-bottom: 0;
		}
		.order-goods-img{
			width: 140rpx;
			height: 140rpx;
			border-radius: 12rpx;
			overflow: hidden;
			margin-right: 16rpx;
		}
		.order-goods-info{
			flex:1;
			overflow: hidden;
			margin-right: 16rpx;
			.order-goods-name{
				width: 100%;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp:2;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.attr{
				width:100%;
				color:#AFB0B2;
				font-size: 24rpx;
				line-height: 36rpx;
			}
		}
		.order-goods-price{
			text-align: right;
			.price{
				color:#FF5040;
			}
			.num{
				padding-top:66rpx;
				font-size:24rpx;
			}
		}
	}
	.total-wrap{
		width: 100%;
		display: flex;
		justify-content: flex-end;
		padding-top:40rpx;
		.num{
			color:#999;
			padding-right: 10rpx;
		}
	}
	.unit{
		color: #AFB0B2;
		font-size: 20rpx;
	}
</style>